<template>
  <view class="container-user" :class="isDark">
    <view class="user-info">
      <view class="volume">
        <view class="info-box">
          <img src="../../static/avatar.png" style="height:62px;width:62px"/>
          <view>
            <text class="my-info">无尽夏</text>
            <text class="my-info">港湾软件</text>
            <view class="tel">18310930952</view>
          </view>
        </view>
        <view class="sign">
          <u-icon name="bell" color="#fed867"/>
          <text class="my-sign">签到</text>
        </view>
      </view>
      <view class="level">
        <view style="display:flex">
          <u-icon name="integral-fill" color="#edc188" size="16"/>
          <text class="goal">Lv.2 专享权益</text>
        </view>
        <view class="proess">
          <u-line-progress
            :percentage="30" active-color="#fff" inactive-color="#e1b279" height="6px"
            :show-text="false"/>
          <view class="soar">
            <text class="soar-text">升级攻略</text>
          </view>
        </view>
        <view>
          <text class="goal">218/300 还需82可升级到LV3</text>
        </view>
      </view>
    </view>
    <view class="order-box">
      <u-cell
        title="我的订单" value="全部订单" :is-link="true"
        title-style="font-size:16px;font-weight:600;letter-spacing:4px" url="/pages/allOrder/allOrder"/>
      <u-row class="user-links" justify="center">
        <u-col span="3" justify="center" text-align="center" align="center">
          <u-icon name="red-packet" size="28"/>
          待付款
        </u-col>
        <u-col span="3" justify="center" text-align="center" align="center">
          <u-icon name="order" size="28"/>
          待接单
        </u-col>
        <u-col span="3" justify="center" text-align="center" align="center">
          <u-icon name="order" size="28"/>
          待发货
        </u-col>
        <u-col span="3" justify="center" text-align="center" align="center">
          <u-icon name="order" size="28"/>
          已发货
        </u-col>
      </u-row>
    </view>
    <view class="user-col" style="margin: 0 15px 50px">
      <u-cell-group>
        <u-cell icon="account" title="个人信息" :is-link="true" url="/pages/userInfo/userInfo"/>
        <u-cell icon="info-circle" title="我的积分" :is-link="true"/>
        <u-cell icon="coupon" title="我的优惠券" :is-link="true"/>
        <u-cell icon="gift" title="收到的礼物" :is-link="true"/>
        <u-cell icon="lock" title="修改密码" :is-link="true" url="/pages/updatePassword/updatePassword"/>
        <u-cell icon="order" title="反馈意见" :is-link="true"/>
        <u-cell icon="setting" title="系统设置" :is-link="true" url="/pages/userSetting/userSetting"/>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isNight: true
    }
  },
  onShow() {
    console.log('isNight------------>', this.isNight)
  },
  computed: {
    isDark() {
      return this.$store.sysConfigStore.isDark
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
@import "../../style/main.scss";

.user-info {

  background: $primary-color;
  padding-top: 28px;

  .volume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .info-box {
      display: flex;
      margin-left: 10px;

      .my-info {
        font-size: 15px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        letter-spacing: 4px;

        &:last-of-type {
          display: inline-block;
          margin-left: 6px;
          border-radius: 11px;
          border: 1px solid #FFFFFF;
          font-size: 10px;
          font-weight: 500;
          letter-spacing: 3px;
          padding: 4px 8px;
        }
      }

      .tel {
        margin-top: 13px;
        font-size: 13px;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 2px;
      }
    }

    .sign {
      width: 72px;
      height: 26px;
      background: $userLink;
      border-radius: 15px 0px 0px 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      .my-sign {
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FBB446;
        letter-spacing: 3px;
      }
    }
  }

  .level {
    background: $primary-color1;
    box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.5);
    border-radius: 12px 12px 0px 0px;
    height: 86px;
    margin: 0 15px;
    padding: 8px 20px;
    box-sizing: border-box;

    .goal {
      font-size: 12px;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #AB7230;
      line-height: 14px;
      letter-spacing: 3px;
    }

    .proess {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .soar {
        width: 86px;
        height: 28px;
        background: $--error-text-color;
        border-radius: 14px;
        text-align: center;

        .soar-text {
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          letter-spacing: 2px;
        }
      }
    }
  }

}

.order-box {
  margin: 15px;

  .user-links {
    background: $userLink;
    padding: 15px 0;
  }
}

.user-col {
  background: $userLink;
}
</style>
